<template>
  <div class="feed_back">
    <van-nav-bar title="用户反馈" left-text="返回" right-text="提交" left-arrow @click-left="onClickLeft" @click-right="onClickRight" />
    <van-field
      v-model="message"
      class="text"
      rows="10"
      label="留言"
      type="textarea"
      maxlength="200"
      placeholder="请输入留言"
      show-word-limit
    />
    <van-cell-group>
      <van-field class="text" v-model="value" label="手机号" placeholder="请输入手机号(选填)" />
    </van-cell-group>
    <div class="upload">
      <span style="float: left">上传照片(选填)：</span>
      <van-uploader v-model="fileList" max-count="1" :after-read="afterRead" />
    </div>
  </div>
</template>

<script>
import {addOpinion} from "../http/api"
import qs from "qs"
import { Notify } from 'vant'
export default {
  name: "FeedBack",
  data() {
    return {
      message: '',
      value: '',
      fileList: [],
      feedImg: ''
    }
  },
  mounted() {
    this.$emit('title', '意见反馈')
    this.message = ''
    this.value = ''
    this.fileList = ''
    this.feedImg = ''
  },
  methods: {
    afterRead(file) {
      this.feedImg = file.content
      this.fileList = this.fileList.splice(1)
    },
    onClickLeft() {
      this.$router.go(-1)
    },
    onClickRight() {
      addOpinion(qs.stringify({
        o_content: this.message,
        o_img: this.feedImg,
        o_phone: this.value
      })).then(res => {
        Notify(res.msg)
        this.$router.push('/my')
      })
    }
  }
}
</script>

<style scoped>
.feed_back {
  text-align: center;
}
.text {
  width: 90%;
  border: 1px solid black;
  margin: 10px auto;
  border-radius: 10px;
}
.upload {
  float: left;
  margin-left: 20px;
}
</style>
